<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>全局组件的特点</title>  
  <style>  
    .product {  
      background-color: orange;  
    }  
  </style>  
</head>  
<body>  
    <!-- 将模板移到挂载点外部 -->
    <template id="product">  
      <div class="product">  
        <h2>{{title}}</h2>  
        <div>{{picture}}</div>  
        <div>商品价格: <span>{{price}}</span></div>  
        <p>{{description}}</p>  
        <button @click="favorite">收藏</button>
      </div>  
    </template> 

    <template id="nav">
      <h2>应用程序导航</h2>
      <product-item></product-item> 全局组件特点: 可以在任意位置调用全局组件
      <hr>
    </template>

  <div id="app">  
    <h2>---------------------------------<使用组件>---------------------------------</h2>  
    <home-nav></home-nav>
    <product-item></product-item>
    <h2>---------------------------------<使用组件>---------------------------------</h2>  

  </div>  
  
  <script src="../lib/vue.js"></script> <!-- 确保路径正确 -->  
  <script>  
    // vue的app组件(根组件)  
    const App = {  
      data: function(){  
        return {  
          title: "我是标题",  
          content: "我是内容",  
        }  
      },  
      methods: {}  
    }  
    // 创建app  
    const app = Vue.createApp(App)  

    // 注册全局组件  
    app.component("product-item", {  
      template: "#product",
      data(){
        return {
          title: "我是商品",
          picture: "我是图片",
          price: 9.9,
          description: "商品描述信息, 9.9秒",
        }
      },
      methods: {
        favorite() {
          console.log("收藏当前商品")
        }
      }
    })  

    app.component("home-nav", {
      template: "#nav"
    })

    // 挂载   
    app.mount("#app")  
  </script>  

</body>  
</html>  
